<!--
 * @Description: 标准任务编辑推广引流类统计
 * @Author: liyujie
 * @Date: 2021/11/1
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/11/1
-->
<template>
    <div class="wrapper">
        <div
            class="studentExtension"
            id="studentExtension"
        >
            <!-- 数据概括 -->
            <div class="module">
                <div class="module_header">
                    <p class="module_title">
                        数据概括
                    </p>
                    <p
                        class="modeule_back"
                        @click="prevPage()"
                    >
                        返回
                    </p>
                </div>
                <div class="model_ist">
                    <div
                        v-for="(name,key) in [
                            '任务名称',
                            '参与人数',
                            '任务领取人数'
                        ]"
                        :key="key"
                        class="model_item"
                    >
                        <p class="model_item_name">
                            {{ name }}
                        </p>
                        <p
                            v-if="key === 0"
                            class="model_item_content"
                        >
                            {{ task_info.task_title ? task_info.task_title : '--' }}
                        </p>
                        <p
                            v-if="key === 1"
                            class="model_item_content"
                        >
                            {{ task_info.accept_count ? task_info.accept_count : 0 }}
                        </p>
                        <p
                            v-if="key === 2"
                            class="model_item_content"
                        >
                            {{ task_info.apply_start_time * 1000 | dateFormatter('yyyy/MM/dd') }} - {{ task_info.apply_end_time * 1000 | dateFormatter('yyyy/MM/dd') }}
                        </p>
                    </div>
                </div>
            </div>

            <!-- 占位背景块 -->
            <div :style="{width: '100%', minHeight: '12px', backgroundColor: '#f0f2f7'}" />

            <!-- 统计报表 -->
            <div class="module">
                <p class="module_title">
                    统计报表
                </p>
                <div class="module_filter">
                    <p :style="{color: 'rgba(153, 153, 153, 1)', fontSize: '14px'}">
                        统计维度：审核通过的数据
                    </p>
                    <div class="module_button">
                        <div
                            class="module_button_down"
                            @click="dowmQuestionData()"
                        >
                            下载每条明细
                        </div>
                        <div
                            class="module_button_down"
                            @click="down()"
                        >
                            保存图片
                        </div>
                    </div>
                </div>

                <!-- 男女占比 -->
                <div class="module_list">
                    <p class="module_list_title">
                        男女占比
                    </p>
                    <div class="module_view">
                        <div class="module_view_wrap">
                            <el-rate
                                v-model="rateValueNan"
                                allow-half
                                disabled
                                :icon-classes="['el-icon-hand-nan1 iconfont', 'el-icon-hand-nan1 iconfont', 'el-icon-hand-nan1 iconfont']"
                                void-icon-class="el-icon-hand-nan1 iconfont"
                                disabled-void-icon-class="el-icon-hand-nan1 iconfont"
                                disabled-void-color="rgba(219,219,219,1)"
                                :colors="['rgba(32, 160, 255, 1)','rgba(32, 160, 255, 1)','rgba(32, 160, 255, 1)']"
                                :max="10"
                            />
                            <div class="module_info">
                                <p class="module_info_number">
                                    {{ isNaN(Number(sex_nan_count / sex_count * 100).toFixed(2)) ? 0 : Number(sex_nan_count / sex_count * 100).toFixed(2) }}%
                                </p>
                                <p class="module_info_text">
                                    男生{{ sex_nan_count ? sex_nan_count : 0 }}人
                                </p>
                            </div>
                        </div>
                        <div
                            class="module_view_wrap"
                            :style="{marginTop: '38px'}"
                        >
                            <el-rate
                                v-model="rateValueNv"
                                allow-half
                                disabled
                                :icon-classes="['el-icon-hand-nv1 iconfont', 'el-icon-hand-nv1 iconfont', 'el-icon-hand-nv1 iconfont']"
                                void-icon-class="el-icon-hand-nv1 iconfont"
                                disabled-void-icon-class="el-icon-hand-nv1 iconfont"
                                disabled-void-color="rgba(219,219,219,1)"
                                :colors="['rgba(249, 91, 86, 1)', 'rgba(249, 91, 86, 1)', 'rgba(249, 91, 86, 1)']"
                                :max="10"
                            />
                            <div class="module_info">
                                <p
                                    class="module_info_number"
                                    :style="{color: 'rgba(249, 91, 86, 1)'}"
                                >
                                    {{ isNaN(Number(sex_nv_count / sex_count * 100).toFixed(2)) ? 0 : Number(sex_nv_count / sex_count * 100).toFixed(2) }}%
                                </p>
                                <p
                                    class="module_info_text"
                                    :style="{color: 'rgba(249, 91, 86, 1)'}"
                                >
                                    女生{{ sex_nv_count ? sex_nv_count : 0 }}人
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="module_table">
                        <el-table
                            :data="sex_statistic"
                            height="100%"
                            style="width: 100%;"
                            border
                        >
                            <el-table-column
                                prop="sex"
                                label="性别"
                                show-overflow-tooltip
                                :formatter="emptyFormatter"
                                align="left"
                            >
                                <template slot-scope="{row}">
                                    {{ row.sex == 1 ? '男生' : row.sex == 2 ? '女生' : '未知' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="submit_count"
                                label="小计"
                                show-overflow-tooltip
                                align="left"
                            />
                            <el-table-column
                                label="占比"
                                show-overflow-tooltip
                                :formatter="emptyFormatter"
                                align="left"
                            >
                                <template slot-scope="{row}">
                                    {{ isNaN(Number(row.submit_count / sex_count * 100).toFixed(2)) ? 0 : Number(row.submit_count / sex_count * 100).toFixed(2) }}%
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

                <!-- 地理分布 -->
                <div class="module_list">
                    <p class="module_list_title">
                        地理分布
                    </p>
                    <div
                        v-if="!!city_statistic.length"
                        id="echarts2"
                    />
                    <el-table
                        :data="city_statistic"
                        height="100%"
                        style="width: 100%;"
                        border
                        :style="{marginTop: !city_statistic.length ? '24px' : ''}"
                    >
                        <el-table-column
                            prop="city_name"
                            label="城市"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="left"
                        />
                        <el-table-column
                            prop="school_count"
                            label="学校数量"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="left"
                        />
                        <el-table-column
                            label="占比"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="left"
                        >
                            <template slot-scope="{row}">
                                {{ isNaN(Number(row.submit_count / city_count * 100).toFixed(2)) ? 0 : Number(row.submit_count / city_count * 100).toFixed(2) }}%
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 返回 -->
                <el-button
                    size="medium"
                    type="default"
                    :style="{
                        width: '160px',
                        marginTop: '50px',
                        marginBottom: '28px',
                        marginLeft: '50%',
                        transform: 'translateX(-50%)'
                    }"
                    @click="prevPage()"
                >
                    返回
                </el-button>
            </div>

            <!-- 图片预览 -->
            <img-preview ref="preview" />
        </div>
    </div>
</template>

<script>
import ImgPreview from "@/components/common/img-preview";
import html2canvas from 'html2canvas';
import { jsPDF } from "jspdf";
export default {
    name: 'StandardTaskRecommendStatistics',
    components: {
        ImgPreview
    },
    filters: {
        filterNumber (submit_count, option) {
            return Number(submit_count / option.submit_count).toFixed(2) * 100;
        }
    },
    computed: {
    },
    data() {
        return {
            task_no: '',
            task_info: {
                task_no: '',
                task_title: '',
                accept_count: '',
                apply_start_time: '',
                apply_end_time: ''
            },
            rateValueNan: 0,//占比
            rateValueNv: 0,
            sex_statistic: [],//性别列表
            sex_count: 0,//性别总数
            sex_nan_count: 0,
            sex_nv_count: 0,
            city_statistic: [],//城市列表
            city_count: 0,//城市总数
            cityList: []
        };
    },
    mounted() {
        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '工作'}, {
            title: '平台标准任务',
            path: '/student/standard-task-list'
        }, {title: '数据统计'}]);

        this.task_no = this.$route.query.task_no ? this.$route.query.task_no : '';
        this.init();
    },
    methods: {
        /**
         * @description 数据初始化
         */
        init () {
            this.$post('/student/task_stuagent%5Cget_task_attract_recommend_submit_form_statistic', {
                task_no: this.task_no
            }, resp => {
                if (resp.code == 1) {
                    this.task_info = {
                        ...resp.data.task_info
                    };
                    this.sex_statistic = resp.data.sex_statistic;
                    this.city_statistic = resp.data.city_statistic;
                    this.sex_count = resp.data.sex_statistic.reduce((cur,next) => {
                        return Number(cur) + Number(next.submit_count);
                    }, []);
                    this.sex_nan_count = resp.data.sex_statistic.reduce((cur,next) => {
                        let num = next.sex == 1 ? next.submit_count : 0;

                        return Number(cur) + Number(num);
                    }, []);
                    this.sex_nv_count = resp.data.sex_statistic.reduce((cur,next) => {
                        let num = next.sex == 2 ? next.submit_count : 0;

                        return Number(cur) + Number(num);
                    }, []);
                    this.rateValueNan = Number((this.sex_nan_count / this.sex_count * 10).toFixed(0));
                    this.rateValueNv = Number((this.sex_nv_count / this.sex_count * 10).toFixed(0));


                    this.city_count = resp.data.city_statistic.reduce((cur,next) => {
                        return Number(cur) + Number(next.school_count);
                    }, []);

                    if(!!resp.data.city_statistic.length) {
                        this.cityList = resp.data.city_statistic.reduce((cur,next) => {
                            cur.push({
                                value: next.school_count,
                                name: next.city_name
                            });
                            return cur;
                        }, []);

                        setTimeout(() => {
                            this.setEchartsPie();
                        }, 300);
                    }
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 饼图
         */
        setEchartsPie () {
            let echarts = document.getElementById('echarts2');
            let my_echarts = this.$echarts.init(echarts);

            let option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    bottom: '3%',
                    left: 'center',
                    itemGap: 30,
                    type: 'scroll'
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        data: this.cityList,
                        label: {
                            color: 'rgba(102, 102, 102, 1)'
                        }
                    }
                ],
                color:[
                    '#3fb1e3',
                    '#6be6c1',
                    '#626c91',
                    '#a0a7e6',
                    '#c4ebad',
                    '#96dee8',
                    '#2ec7c9',
                    '#b6a2de',
                    '#5ab1ef',
                    '#ffb980',
                    '#d87a80',
                    '#8d98b3',
                    '#e5cf0d',
                    '#97b552',
                    '#4ea397',
                    '#22c3aa',
                    '#7bd9a5',
                    '#d0648a',
                    '#f58db2',
                    '#f2b3c9',
                    '#4ea397',
                    '#22c3aa',
                    '#7bd9a5',
                    '#d0648a',
                    '#f58db2',
                    '#f2b3c9'
                ],
                //操作
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            show: false
                        },
                        dataView: {
                            readOnly: true
                        },
                        restore: {},
                        saveAsImage: {}
                    },
                    right: 15,
                    height: 8
                }
            };

            my_echarts.setOption(
                option
            );
        },

        /**
         * @description 下载报告
         */
        down () {
            this.getPdf('推广引流', 'studentExtension');
        },

        /**
         * @description 页面截图，生成pdf文件
         */
        getPdf (title, domClass) {
            html2canvas(document.querySelector('#studentExtension'), {
                allowTaint: true
            }).then(function (canvas) {
                let contentWidth = canvas.width;
                let contentHeight = canvas.height;
                let pageHeight = contentWidth / 592.28 * 841.89;
                let leftHeight = contentHeight;
                let position = 0;
                let imgWidth = 595.28;
                let imgHeight = 592.28 / contentWidth * contentHeight;
                let pageData = canvas.toDataURL('image/jpeg', 1.0);
                // eslint-disable-next-line new-cap
                let PDF = new jsPDF('', 'pt', 'a4');

                if (leftHeight < pageHeight) {
                    PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                } else {
                    while (leftHeight > 0) {
                        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        if (leftHeight > 0) {
                            PDF.addPage();
                        }
                    }
                }
                PDF.save(title + '.pdf');
            });
        },

        /**
         * @description 下载每条明细
         */
        dowmQuestionData () {
            let base = this.$baseUrl;
            let params = {
                student_keyword: '',
                task_keyword: this.task_no,
                school_name: '',
                status: 99,
                verify_status: 99,
                award_status: 99,
                task_category: 99,
                start_time: '',
                end_time: '',
            };
            let ticket = localStorage.getItem('sessionTicket');
            let queryStr = Object.keys(params)
                .map(key => `${key}=${params[key]}`)
                .join('&');
            let url = `${base}/student/task_stuagent_student_task%5Cexport_step_task_report_list?${queryStr}&__ticket=${ticket}`;

            window.open(url);
        },

        /**
         * @description 图片预览
         */
        handlePreview (images) {
            this.$refs.preview.show([
                images
            ], 0);
        },

        /**
         * @description 下载图片
         */
        dowmImages (imgsrc, name = 'images') {
            let image = new Image();

            image.setAttribute('crossOrigin', 'anonymous');
            image.onload = () => {
                let canvas = document.createElement('canvas');

                canvas.width = image.width;
                canvas.height = image.height;
                let context = canvas.getContext('2d');

                context.drawImage(image, 0, 0, image.width, image.height);

                let url = canvas.toDataURL('image/png');
                let a = document.createElement('a');
                let event = new MouseEvent('click');

                a.download = name || 'photo';
                a.href = url;
                a.dispatchEvent(event);
            };
            image.src = imgsrc;
        },

        /**
         * @description 返回
         */
        prevPage () {
            this.$router.push({
                name: 'standardTaskList'
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    },
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;
    margin: 12px;
    overflow-y: auto;
    &::-webkit-scrollbar {
        width: 4px;
    }
}
#echarts {
    width: calc(100% - 144px);
    margin-left: 72px;
    height: 458px;
}
#echarts2 {
    width: calc(100% - 144px);
    margin-left: 72px;
    height: 542px;
}
#echarts3 {
    width: calc(100% - 144px);
    margin-left: 72px;
    height: 488px;
}
.studentExtension {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    overflow: auto;
    .module {
        width: 100%;
        min-height: 202px;
        overflow: hidden;
        padding: 24px 0;
        .module_title {
            height: 25px;
            line-height: 25px;
            color: rgba(51, 51, 51, 1);
            font-weight: 500;
            font-size: 18px;
            position: relative;
            margin-left: 44px;
            &::before {
                content: '';
                position: absolute;
                width: 2px;
                height: 18px;
                background-color: rgba(24, 144, 255, 1);
                top: 4px;
                left: -10px;
            }
        }
        .module_header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .module_title {
                height: 25px;
                line-height: 25px;
                color: rgba(51, 51, 51, 1);
                font-weight: 500;
                font-size: 18px;
                position: relative;
                margin-left: 44px;
                &::before {
                    content: '';
                    position: absolute;
                    width: 2px;
                    height: 18px;
                    background-color: rgba(24, 144, 255, 1);
                    top: 4px;
                    left: -10px;
                }
            }
            .modeule_back {
                color:rgba(102, 102, 102, 1);
                font-size: 14px;
                cursor: pointer;
                margin-right: 44px;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        .model_ist {
            width: calc(100% - 88px);
            margin-left: 44px;
            margin-top: 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .model_item {
                flex: 1;
                border: 1px rgba(238, 238, 238, 1) solid;
                border-radius: 4px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 105px;
                box-sizing: border-box;
                padding: 0 24px;
                .model_item_name {
                    color: rgba(153, 153, 153, 1);
                    font-size: 14px;
                    line-height: 20px;
                    margin-bottom: 12px;
                }
                .model_item_content {
                    color: rgba(51, 51, 51, 1);
                    line-height: 25px;
                    font-size: 18px;
                    font-weight: 500;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
            .model_item:nth-child(2) {
                margin: 0 20px;
            }
        }
        .module_filter {
            width: calc(100% - 88px);
            margin-left: 44px;
            height: 84px;
            border-bottom: 1px rgba(235, 238, 245, 1) solid;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .module_button {
                display: flex;
                align-items: center;
                .module_button_down {
                    width: 120px;
                    height: 36px;
                    border: 1px rgba(32, 160, 255, 1) solid;
                    border-radius: 4px;
                    text-align: center;
                    line-height: 36px;
                    color: rgba(32, 160, 255, 1);
                    font-size: 14px;
                    cursor: pointer;
                }
                .module_button_down:first-child {
                    margin-right: 24px;
                }
            }
        }
        .module_wrap {
            .module_items {
                width: calc(100% - 88px);
                margin-left: 44px;
                border-bottom: 1px rgba(235, 238, 245, 1) solid;
                padding: 38px 0 51px 0;
                .module_nav {
                    width: 100%;
                    height: 28px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 30px;
                    .module_nav_title {
                        color: rgba(51, 51, 51, 1);
                        font-size: 20px;
                        font-weight: 500;
                    }
                    .module_nav_info {
                        display: flex;
                        align-items: center;
                        .module_nav_set {
                            color: rgba(102, 102, 102, 1);
                            font-size: 14px;
                            margin-right: 16px;
                        }
                        .module_nav_list {
                            display: flex;
                            align-items: center;
                            cursor: pointer;
                            .icon-check_box_def {
                                color: rgba(153, 153, 153, 1);
                                font-size: 14px;
                            }
                            .icon-check_box_sel {
                                color: rgba(32, 160, 255, 1);
                                font-size: 14px;
                            }
                            .module_nav_name {
                                color: rgba(102, 102, 102, 1);
                                font-size: 14px;
                                margin-left: 10px;
                            }
                        }
                        .module_nav_list:nth-child(2) {
                            margin-right: 32px;
                        }
                    }
                }
            }
        }
        .module_list {
            width: calc(100% - 88px);
            margin-left: 44px;
            border-bottom: 1px rgba(235, 238, 245, 1) solid;
            box-sizing: border-box;
            padding: 38px 0 50px 0;
            .module_list_title {
                color: rgba(51, 51, 51, 1);
                font-size: 20px;
                line-height: 28px;
                font-weight: 600;
            }
            .module_view {
                width: calc(100% - 144px);
                margin: 30px 72px;
                display: flex;
                flex-direction: column;
                align-items: center;
                .module_view_wrap {
                    display: flex;
                    align-items: center;
                    min-width: 700px;
                    .module_info {
                        display: flex;
                        flex-direction: column;
                        margin-left: 10px;
                        justify-content: center;
                        .module_info_number {
                            color: rgba(32, 160, 255, 1);
                            font-size: 48px;
                            font-weight: 500;
                            margin-bottom: 10px;
                        }
                        .module_info_text {
                            color: rgba(32, 160, 255, 1);
                            font-size: 20px;
                        }
                    }
                }
                .module_table {
                    width: calc(100% - 144px);
                }
            }
        }
    }
}
</style>

<style lang="less">
.studentExtension {
    .el-table th {
        background-color: rgba(242, 242, 242, 1);
    }
    .module_view {
        .el-icon-hand-nan1 {
            // width: 42px;
            font-size: 80px;
        }
        .el-icon-hand-nv1 {
            // width: 42px;
            font-size: 80px;
        }
        .el-rate__item {
            margin-left: -40px;
        }
    }
    .el-rate {
        height: auto;
    }
    .el-table__body-wrapper {
        height: auto !important;;
    }
    .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
        padding-left: 52px !important;
    }
}
</style>
